<template>
  <el-container class="renzheng">
    <el-header></el-header>
    <el-main>
      <div style="padding: 0 20px" v-html="list.content"></div>
    </el-main>
    <el-footer>
      <div><el-radio v-model="radio" @change="chooseRadio"></el-radio><p @click="open">我同意《云商汇平台诚信会员服务协议》</p></div>
      <span @click="buy">同意协议并去购买</span>

    </el-footer>
    <div class="show" v-if="show"></div>
    <div class="xieyi" v-if="show">
      <el-main>
        <div style="padding: 0 20px" v-html="buyXieYi.content"></div>
      </el-main>
      <el-button type="danger" @click.stop="close">确定</el-button>

    </div>
  </el-container>
</template>

<script>
  export default {
    data(){
      return{
        list: null,//会员认证权益
        buyXieYi:null,//购买协议
        radio:'',
        show:false,

      }
    },
    methods:{
      chooseRadio(val){
        this.radio = val;
      },
      open() {
        //广告推光协议
        let data = {
          type:2
        }
        this.$axios.post('api/front/protocol/select',this.qs.stringify(data))
          .then(res => {
            if(res.data.status == 200){
              this.buyXieYi = res.data.obj;
            }else {
              this.$message.error('服务器开小差···')
            }

          })
        this.show = true
      },
      close(){
        this.show = false;
      },
      buy(){
        if(this.radio == ''){
          this.$message.warning('请同意相关协议')
          return;
        }else {
          this.$router.push('/guanggao')
        }

      }
    },
    mounted(){
      //请求广告推广权益接口
      let data = {
        type:4
      }
      this.$axios.post('api/front/protocol/select',this.qs.stringify(data))
        .then(res => {
          if(res.data.status == 200){
            this.list = res.data.obj;
          }else {
            this.$message.error('服务器开小差···')
          }

        })


    },
    created(){

    }
  }
</script>

<style scoped lang="scss">
  .renzheng{
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    .el-main{
      h5{
        font-size: 16px;
      }
      p{
        color: #ccc;
        font-size: 14px;
        margin: 0;
        text-align: left;
        padding: 0 20px;
        text-indent: 28px;
      }
    }
    .el-footer{
      padding: 0;
      margin: 20px 0;
      display: flex;
      flex-direction: column;
      div{
        display: flex;
        flex-direction: row;
        justify-content: center;
        .el-radio{

        }
        p{
          margin: 0;
          padding: 0;
          color: #5193ff;
        }
      }

      span{
        width: 80%;
        margin: 20px auto;
        border-radius: 4px;
        padding: 10px 0;
        background: orangered;
        color: #fff;
        font-size: 16px;
      }

    }
    .show{
      width: 100%;
      position: absolute;
      top: 0;
      height: 100%;
      background: #000;
      z-index: 2;
      opacity: 0.5;
    }
    .xieyi{
      position: absolute;
      top:50px;
      height: 80%;
      width: 90%;
      left: 5%;
      background: #fff;
      z-index: 66;
      border-radius: 6px;
      .el-main{
        height: 90%;
        h5{
          font-size: 16px;
        }
        p{
          color: #ccc;
          font-size: 14px;
          margin: 0;
          text-align: left;
          padding: 0 20px;
          text-indent: 28px;
        }
      }

    }
  }
</style>
